function ubi_editor(id) {
    this.id = id;
    this.content = '';
    this.content_div = {};
    this.source_box = {};
    this.bar_div = {};
    this.src_mode = false;
    this.modified = false;
    this.bar = {
    bold: {
            id:'ubi-editor-bold-btn', tips:'Bold', 
            enable: true, tag: ['b','strong'],css:{'font-weight':'bold'}, 
            fn: function () {
                this.set_simple_format.apply(this,['bold']);
            }
        },
    italic: {
            id:'ubi-editor-italic-btn', tips:'Italic',  
            enable: true, tag: ['i','em'], css:{'font-style':'italic'},
            fn: function () {
                this.set_simple_format('italic');
            }
        },
    strikeThrough: {
            id:'ubi-editor-strike-btn', tips:'Strike Through', 
            enable: true, tag: ['s','strike'], css:{'text-decoration':'line-through'},
            fn: function () {
                this.set_simple_format('strikeThrough');
            }
        },
    underline: {
            id:'ubi-editor-under-btn', tips:'Underline', 
            enable: true, tag: ['u'], css: {'text-decoration':'underline'},
            fn: function () {
                this.set_simple_format('underline');
            }
        },
    separator00: {separator: true},

    ul: {
            id:'ubi-editor-ul-btn', tips:'Unordered List', 
            enable: true, tag: ['ul'],
            fn: function () {
                this.set_simple_format('insertUnorderedList');
            }
        },
    ol: {
            id:'ubi-editor-ol-btn', tips:'Ordered List', 
            enable: true, tag: ['ol'],
            fn: function () {
                this.set_simple_format('insertOrderedList');
            }
        },
    quote: {id:'ubi-editor-quote-btn', tips:'Blockqoute', enable: true, tag: ['blockqoute']},

    separator01: {separator: true},

    align_left: {
            id:'ubi-editor-left-btn', tips:'Align left',
            enable: true, tag: ['left'],
            fn: function(){
                this.set_simple_format('justifyLeft');
            }
        },
    align_center: {
            id:'ubi-editor-center-btn', tips:'Align center', 
            enable: true, tag: ['center'], css: {'text-align':'center'},
            fn: function() {
                this.set_simple_format('justifyCenter');        
            }
        },
    align_right: {
            id:'ubi-editor-right-btn', tips:'Align right',
            enable: true, tag: ['right'],
            fn: function() {
                this.set_simple_format('justifyRight');
            }
        },

    separator02: {separator: true},
    subs: {
            id:'ubi-editor-subs-btn', tips:'Subscript',
            enable: true, tag: ['sub'],
            fn: function(){
                this.set_simple_format('subscript');
            }
        },
    supers: {
            id:'ubi-editor-supers-btn', tips:'Superscript', 
            enable: true, tag: ['sup'],
            fn: function() {
                this.set_simple_format('superscript');        
            }
        },

    separator03: {separator: true},
    link: {
            id:'ubi-editor-link-btn', tips:'Insert/Create A Link',
            enable: true, tag: ['a'],
            fn: function(){
                var selection = this.get_selection();
                if ( selection.length > 0 ){
                    if ( $.browser.msie )
                        this.editor_doc.execCommand('createLink', true, null);
                    else {
                        var url = prompt('URL', 'http://');

                        if ( url && url.length > 0 ) {
                            this.editor_doc.execCommand('unlink', false, []);
                            this.editor_doc.execCommand('createLink', false, url);
                        }
                    }
                }
                else 
                    alert('Plz select some text first');
            },
        },
    unlink: {
            id:'ubi-editor-unlink-btn', tips:'Remove this Link', 
            enable: true, tag: ['sup'],
            fn: function(event) {
                var elm = this.crr_elm;
                if (elm.tagName.toLowerCase() == 'a')
                    $(elm).replaceWith($(elm).text())
            }
        },

    image: {
            id:'ubi-editor-image-btn', tips:'Insert a Image', 
            enable: true, tag: ['imgs'],
            fn: function(event) {
                if ( $.browser.msie )
                    this.editor_doc.execCommand('insertImage', true, null);
                else {
                    var url = prompt('URL', 'http://');
                    if ( url && url.length > 0 )
                        this.editor_doc.execCommand('insertImage', false, url);
                }
            }
        },

    separator05: {separator: true},


    clear: {
            id:'ubi-editor-clear-btn', tips:'Clear all format', 
            enable: true,
            fn: function(event) {
                this.editor_doc.execCommand('removeFormat', false, []);
                this.editor_doc.execCommand('unlink', false, []);
            }
        },

    separator06: {separator: true},
    html: {
            id:'ubi-editor-html-btn', tips:'Toggle HTML Mode',
            enable: true,
            fn: function(event){
                this.toggle_mode();    
                if (this.src_mode)
                    $(event.target).addClass('ubi-editor-btn-active');
                else
                    $(event.target).removeClass('ubi-editor-btn-active');

            }
        },
   check_spell: {
            id:'ubi-editor-check-spell-btn', tips:'Toggle Spellchecker',
            enable: true,
            fn: function() {
                return;
            }
        },


    };

    this.get_editor_id = function () {
        return 'ubi-editor-' + this.id;
    };
    this.get_bar_id = function () {
        return 'ubi-editor-bar-' + this.id;
    };

    this.load_bar= function (new_bar) {
        this.bar = new_bar;
    };

    this.create_editor = function (div) {
        this.content_div = div    
        $(this.content_div).attr('contenteditable', 'true');
        this.status = 'open';
        //save orignal div
        return ;
    };

    this.create_bar = function (bar_div, new_bar) {
        if (new_bar)
            this.load_bar(new_bar);
        $(bar_div).html('');
        panel = $('<div id="ubi-editor-bar-' + this.id + '" class="ubi-editor-bar-btns">');
        for (var k in this.bar) {      
            if (this.bar[k].separator){
                panel.append('<span class="ubi-editor-bar-space"/>')
            } else {     
                var id = this.bar[k].id;
                var tips = this.bar[k].tips;
                var fn = this.bar[k].fn;
                var drop_menu = this.bar[k].drop_menu;
                this.append_btn(panel, id, tips, fn, drop_menu);
            }
        }
        $(bar_div).append(panel);
    };

    this.append_btn = function (panel, id, tips, fn, drop_menu) {
        var wrap = $('<span class="ubi-editor-btn-base""></span>')
            .addClass(id + '-wrap');
        var _this = this;
        $('<a class="ubi-editor-btn-hlight" href="#" title="'+tips+'"></a>').addClass(id)
        .click(function(event) {
                if (fn) {
                    //pass ubi_editor to fn
                    fn.apply(_this, [event]); 
                }
                return false;
        }).appendTo(wrap);
        if (drop_menu) {
            $('<div></div>').addClass(drop_menu).appendTo(wrap);
        }
        wrap.appendTo(panel);  
    };
    this.save_content = function () {
        return ;
        var editor = $('#' + this.get_editor_id());
        if (editor.length == 0) {// editor is not opened
            return;
        }
        var new_value = '';
        if (this.src_mode) {
            new_value = $(this.source_box).val();
            $(editor.attr('contentWindow').document.body).html(new_value);
        } else { 
            new_value = $(editor.attr('contentWindow').document.body).html();
             $(this.source_box).val(new_value);
        }
        // save to content_div
        $(this.content_div).html(new_value);
        this.modified = false;
    }; 

    this.toggle_mode = function (){
        var editor = $('#' + this.get_editor_id());
        if (editor.length == 0)
            return;
        if (this.modified)
            this.save_content();
        //remove editor and show content div
        if (this.src_mode) {
            $(this.source_box).hide()
            editor.show()
        } else {
            editor.hide();
            $(this.source_box).show()
        }
        this.src_mode = ! this.src_mode;
    };
    this.close = function () { 
        //this.content_div.attr('class', 'he');//('contenteditable', 'false');
        //return;
        var editor = $('#' + this.get_editor_id());
        if (editor.length == 0)
            return;
        if (this.modified)
            this.save_content();
        //remove editor and show content div
        editor.remove();
        $(this.source_box).remove();
        this.content_div.show();
        this.status = 'closed';
    };


    this.set_simple_format = function (format){
        //this.editor_doc.execCommand(format, false, null);
        document.execCommand(format, false, null);
        return ;
    };
    this.get_selection = function()
    {
        var editor = $('#'+this.get_editor_id());

        if ( editor.attr('contentWindow').document.selection )
            return editor.attr('contentWindow').document.selection.createRange().text;
        else
            return editor.attr('contentWindow').getSelection().toString();
    };

    this.set_selection = function(b,e)
    {
        var editor = $('#'+this.get_editor_id());

        if ( editor.attr('contentWindow').document.selection ){
            var range = editor.attr('contentWindow').document.selection.createRange();
            range.moveStart(b, e)
        } else {
            editor.attr('contentWindow').setSelection(b,e)//.toString();
        }
    };

    this.check_format = function (target){
        for (var name in this.bar ) { 
            var btn = this.bar[name];
            $('.' + btn.id).removeClass('ubi-editor-btn-active');
            if (btn.css) { 
                var elm = $(target);
                do {
                    if ( elm[0].nodeType != 1 )
                        break;
                    for ( var css_prop in btn.css ) {
                        if (elm.css(css_prop).toString().toLowerCase() == btn.css[css_prop])
                            $('#'+this.get_bar_id() + ' .'+btn.id).addClass('ubi-editor-btn-active')
                    }
                } while ( elm = elm.parent() );
            }

            if ( btn.tag ){
                var elm = target;

                do {
                    if ( elm.nodeType != 1 )
                        break;
                    if ( $.inArray(elm.tagName.toLowerCase(), btn.tag) != -1 )
                        $('#'+this.get_bar_id() + ' .'+btn.id).addClass('ubi-editor-btn-active')
                } while ( elm = elm.parentNode );
            }
        }
    };
}


